<template>
  <div class="login">
    <!-- 头部 -->
    <div class="head">
      <div class="left">
        <img class="logo" src="https://s.yezgea02.com/1582958061265/mlogo.png" alt="logo">
      </div>
      <div class="right">
        <div class="top">新风商城</div>
        <div class="bottom">Vue3.0 后台管理系统</div>
      </div>
    </div>
    <!-- 验证 -->
    <div class="verify">
      <el-form label-position="top" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"
        class="demo-ruleForm">
        <el-form-item label="账户" prop="acount">
          <el-input type="text" v-model="ruleForm.acount" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <div style="color: #333">登录表示您已同意<a style="color:rgb(69, 149, 149)">《服务条款》</a></div>
          <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
          <el-checkbox v-model="state.checked">下次自动登录</el-checkbox>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import axios from '@/utils/axios'
import md5 from 'js-md5'
import { localSet } from '@/utils'
export default {
  data() {
    var validateAcount = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('账户不能为空'));
      } else {
        if (this.ruleForm.validatePassword !== '') {
          this.$refs.ruleForm.validateField('validatePassword');
        }
        callback();
      }
    };
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('密码不能为空'));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        acount: '',
        password: '',
      },
      state: {
        checked: true
      },
      rules: {
        acount: [
          { required: true, validator: validateAcount, trigger: 'blur' }
        ],
        password: [
          { required: true, validator: validatePassword, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          axios.post('/api/adminUser/login', {
            userName: this.ruleForm.acount || '',
            passwordMd5: md5(this.ruleForm.password)
          }).then(res => {
            console.log(res);
            let newtoken = res.data.data
            // console.log(newtoken);
            localSet('token', newtoken);
            window.location.href = '/'
          })
        } else {
          alert('error submit!!');
          console.log('error submit!!');
          return false;
        }
      });
    },

  }
}
</script>
<style scoped lang="less">
.login {
  width: 422px;
  height: 500px;
  margin: 200px auto;
  box-shadow: 0px 10px 20px 5px rgb(207, 203, 203);
  padding: 40px;
  box-sizing: border-box;

  .head {
    display: flex;
    width: 100%;
    height: 30%;

    .left {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 90px;
      }
    }

    .right {
      padding-top: 30px;

      .top {
        color: #1BAEAE;
        font-size: 28px;
        font-weight: bold;
      }

      .bottom {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .verify {
    width: 100%;
    height: 70%;

    /deep/ .el-form-item {
      margin-bottom: 0px;
      .el-form-item__label{
        float: left !important;
      }
      .el-button--primary {
        width: 300px;
        height: 40px;
        color: #FFF;
        background-color: rgb(0, 173, 173);
        border-color: rgb(0, 173, 173);
        margin-left: 21px;
      }

      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: rgb(0, 173, 173);
        border-color: rgb(0, 173, 173);
      }

      .el-checkbox__input.is-checked+.el-checkbox__label {
        color: rgb(0, 173, 173);
      }
    }




  }

}
</style>